
<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 1.1筛选区域 -->
      <div class="questions-head-addbtn">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          @click="$router.push(
      '/questions/new/'
       
      )"
        >新增试题</el-button>
      </div>

      <el-form
        class="box-select"
        ref="questionsSelectRef"
      >
        <el-form-item class="select">
          <span>学科</span>
          <select-index
            :options="subjectlist"
            ref="select1"
            @onfocus="onSimple"
            @onchange="onSimpleChange"
          ></select-index>
        </el-form-item>

        <el-form-item class="select">
          <span>二级目录</span>
          <select-index
            :options="directoryslist"
            ref="select2"
            @onchange="ontableOfContentsChange"
          ></select-index>
        </el-form-item>

        <el-form-item class="select">
          <span>标签</span>
          <select-index
            :options="tagslist"
            ref="select3"
            @onchange="onlabelChange"
          ></select-index>
        </el-form-item>

        <el-form-item class="select">
          <span>关键字</span>
          <el-input
            placeholder="请输入内容"
            ref="select4"
            v-model="queryinfo.keyword"
          ></el-input>
        </el-form-item>

        <el-form-item class="select">
          <span>试题类型</span>
          <select-index
            :options="questionType"
            ref="select5"
            @onchange="onquestionTypeChange"
          ></select-index>
        </el-form-item>

        <el-form-item class="select">
          <span>难度</span>
          <select-index
            :options="difficulty"
            ref="select6"
            @onfocus="onSimple"
            @onchange="onquestionTypeChange"
          ></select-index>
        </el-form-item>

        <el-form-item class="select">
          <span>方向</span>
          <select-index
            :options="direction"
            ref="select7"
            @onchange="ondirectionChange"
          ></select-index>
        </el-form-item>

        <el-form-item class="select">
          <span>录入人</span>
          <select-index
            @onfocus="onSimple"
            ref="select8"
            :options="entryPerson"
            @onchange="oncreatorIDChange"
          ></select-index>
        </el-form-item>

        <el-form-item class="select">
          <span>题目备注</span>
          <el-input
            placeholder="请输入内容"
            ref="select9"
            v-model="queryinfo.remarks"
          ></el-input>
        </el-form-item>

        <el-form-item class="select">
          <span>企业简称</span>
          <el-input
            placeholder="请输入内容"
            ref="select10"
            v-model="queryinfo.shortName"
          ></el-input>
        </el-form-item>

        <el-form-item class="select citySelect">
          <span>城市</span>
          <select-index
            :options="map"
            ref="select11"
            @onchange="oncitychange"
          ></select-index>
          <select-index
            :options="countyLevelCity"
            ref="select12"
            @onchange="onareachange"
          ></select-index>
        </el-form-item>

        <el-form-item class="select button">
          <el-button @click="clearAll">清除</el-button>
          <el-button
            type="primary"
            @click="onSearchQuestion"
          >搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 列表区域 -->
      <questions-list></questions-list>

    </el-card>
  </div>
</template>

<script>
if (1) {
  console.log(1)
} else {
  console.log(0)
}
import { simple } from '@/api/hmmm/subjects'
import { list } from '@/api/hmmm/directorys'
import { tagslist } from '@/api/hmmm/tags'
import { questionslist } from '@/api/base/users'
import { questionslists } from '@/api/hmmm/questions'
import { questionType as isquestionType } from '../../api/hmmm/constants'
import { difficulty as isdifficulty } from '@/api/hmmm/constants'
import { direction as isdirection } from '@/api/hmmm/constants'
import SelectIndex from './questions/index'
import questionsList from './questions-list/index'
import ismap from '@/api/base/map'
import { provinces, citys } from '@/api/hmmm/citys.js'

export default {
  name: '',
  //导入组件
  components: {
    SelectIndex,
    questionsList,
  },
  //传递数据
  props: {},
  //数据存储
  data() {
    return {
      subjectlist: [], //学科列表
      subjectID: '', //学科ID
      directoryslist: [], //目录列表
      tagslist: [], //目录列表
      //试题类型
      questionType: isquestionType,
      // 难度
      difficulty: isdifficulty,
      // 方向
      isdirection: isdirection,
      direction: [],
      entryPersoninfo: {
        page: 1,
        pagesize: 1,
        keyword: '',
      },
      entryPerson: [], //录入人数组
      ismap: ismap,
      map: [], //城市数据
      countyLevelCity: [], //县级城市

      // dataList: [],
      // total: '',
      // 搜索请求参数
      queryinfo: {
        query: '',
        page: 1,
        pagesize: 10,
        subjectID: null, //学科ID
        catalogID: null, //目录ID
        tags: null, //标签
        keyword: null, //关键字
        questionType: null, //试题类型
        difficulty: null, //试题难度
        direction: null, //方向
        creatorID: null, //录入人ID
        remarks: null, //题目备注
        shortName: null, //企业简称
        city: null, //城市
        province: null, //地区
      },
    }
  },
  //事件处理函数
  methods: {
    oncitychange(value) {
      console.log(this.queryinfo.city)
      this.countyLevelCity = []
      const city = provinces()[value]
      console.log(city)
      this.queryinfo.city = city
      const countyLevelCity = []
      const items = citys(city)
      items.forEach((item) => {
        this.countyLevelCity.push({
          value: this.countyLevelCity.length,
          label: item,
        })
      })
    },
    // 页面初始化函数
    getSelete() {
      console.log(this.direction)
      this.isdirection.forEach((item) => {
        this.direction.push({
          value: this.direction.length,
          label: item,
        })
      })
      const map = []
      const items = provinces()
      items.forEach((item) => {
        map.push({
          value: map.length,
          label: item,
        })
      })
      this.map = map
    },

    // 获取学科数据
    async onSimple(value, items) {
      try {
        const { data } = await simple()
        console.log(data)
        this.subjectlist = data
        this.subjectID = value
        console.log(this.subjectID)
      } catch (err) {
        this.$message('获取数据失败')
      }
      try {
        this.entryPerson = []
        const { data } = await questionslist(this.entryPerson)
        console.log(data)
        const items = data.list
        items.forEach((item) => {
          this.entryPerson.push({
            value: this.entryPerson.length,
            label: item.username,
          })
        })
      } catch (err) {
        console.log(err)
        this.$message('获取数据失败')
      }
    },
    // 监听学科变化
    async onSimpleChange(value, item) {
      this.queryinfo.subjectID = value
      this.tagslist = []
      this.directoryslist = []
      this.subjectID = value
      // 获取目录数据
      try {
        // 添加二级标题数据
        // this.directorysshow = false
        const { data } = await list({ subjectID: this.subjectID })
        console.log(this.subjectID)
        console.log(data)
        const items = data.items
        items.forEach((item) => {
          this.directoryslist.push({
            value: item.id,
            label: item.directoryName,
          })
        })
        // this.directorysshow = true
      } catch (err) {
        this.$message('获取数据失败')
      }

      // 添加标签数据
      try {
        const { data } = await tagslist({ subjectID: this.subjectID })
        console.log(data)
        const items = data.items
        items.forEach((item) => {
          this.tagslist.push({
            value: item.id,
            label: item.tagName,
          })
        })
      } catch (err) {
        console.log(err)
      }
    },
    // 搜索按钮
    async onSearchQuestion() {
      console.log(this.queryinfo)
      this.$hub.$emit('onSearchQuestion', this.queryinfo)
      // console.log(this.queryinfo)
      // this.$store.commit('onQueryinfo', this.queryinfo)
      // try {
      //     const { data } = await questionslists(this.queryinfo)
      //     console.log(data)
      //     this.$store.commit('onSearch', data.items)
      //     this.$store.commit('onTotal', data.counts)
      // } catch (err) {
      //     console.log(err)
      // }
    },
    // 监听耳机目录变化
    ontableOfContentsChange(value) {
      this.queryinfo.catalogID = value
    },
    // 监听标签变化
    onlabelChange(value) {
      this.queryinfo.tags = value
    },
    // 监听试题类型变化
    onquestionTypeChange(value) {
      this.queryinfo.questionType = value
    },
    // 监听试题难度变化
    onquestionTypeChange(value) {
      // if (value == 1) {
      //     this.queryinfo.difficulty = '简单'
      // } else if (value == 2) {
      //     this.queryinfo.difficulty = '一般'
      // } else {
      //     this.queryinfo.difficulty = '困难'
      // }
      this.queryinfo.difficulty = value
    },
    // 监听方向变化
    ondirectionChange(value) {
      if (value == 0) {
        this.queryinfo.direction = 'o2o'
      } else if (value == 1) {
        this.queryinfo.direction = '外包服务'
      } else if (value == 2) {
        this.queryinfo.direction = '企业服务'
      } else if (value == 3) {
        this.queryinfo.direction = '互联网金融'
      } else if (value == 4) {
        this.queryinfo.direction = '企业咨询'
      } else if (value == 5) {
        this.queryinfo.direction = '互联网'
      } else if (value == 6) {
        this.queryinfo.direction = '电子商务'
      } else {
        this.queryinfo.direction = '其他'
      }
    },
    // 监听录入人的变化
    oncreatorIDChange(value) {
      this.queryinfo.creatorID = value
    },
    // 地区
    onareachange(value) {
      this.queryinfo.province = this.countyLevelCity[value].label
    },
    clearAll() {
      this.$refs.select1.value = ''
      this.$refs.select2.value = ''
      this.$refs.select3.value = ''
      this.$refs.select5.value = ''
      this.$refs.select6.value = ''
      this.$refs.select7.value = ''
      this.$refs.select8.value = ''
      this.$refs.select11.value = ''
      this.$refs.select12.value = ''
      this.queryinfo.subjectID = null
      this.queryinfo.catalogID = null
      this.queryinfo.tags = null
      this.queryinfo.keyword = null
      this.queryinfo.questionType = null
      this.queryinfo.difficulty = null
      this.queryinfo.direction = null
      this.queryinfo.creatorID = null
      this.queryinfo.remarks = null
      this.queryinfo.shortName = null
      this.queryinfo.city = null
      this.queryinfo.province = null
    },
  },
  //事件监听函数
  watch: {},
  //计算属性
  computed: {},
  //生命周期函数
  created() {
    this.getSelete()
  },
}
</script>

<style scoped lang='less'>
/deep/.el-card__body {
  padding: 0;
}

.questions-head-addbtn {
  display: flex;
  justify-content: flex-end;
  margin-right: 15px;
}
.box-select {
  display: flex;
  flex-wrap: wrap;
  min-width: 1388px;
  /deep/.el-form-item__content {
    display: flex;
    width: 300px;
    height: 40px;
    align-items: center;
    justify-content: flex-end;
  }
  .select {
    align-items: center;
    margin: 15px;
    span {
      font-size: 14px;
      font-weight: 700;
    }
  }
  /deep/span[data-v-40019310] {
    width: 100px;
    text-align: center;
    white-space: nowrap; /*不换行*/
  }
  /deep/.el-input__inner {
    width: 225px;
  }
  .citySelect {
    position: relative;
    left: 5px;
    span {
      width: 75px;
    }
    /deep/.el-input__inner {
      width: 112px !important;
      margin-left: 5px;
    }
  }
  /deep/.el-alert {
    margin-bottom: 10px !important;
  }
}
</style>
